<template>
  <view class="popularity-container">
    <!-- 顶部标题栏 -->
    <view class="header animate-fade-in">
      <view class="title">人气榜</view>
      <view class="subtitle">发现最受欢迎的景点和攻略</view>
    </view>

    <!-- 分类切换 -->
    <view class="category-tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.type"
        :class="['tab-item', { active: currentTab === tab.type }]"
        @tap="switchTab(tab.type)"
      >
        <uni-icons 
          :type="getIconType(tab)" 
          size="20" 
          :color="currentTab === tab.type ? '#ff6b6b' : '#666'"
        ></uni-icons>
        <text>{{ tab.name }}</text>
      </view>
    </view>

    <!-- 排行榜列表 -->
    <scroll-view 
      class="ranking-list" 
      scroll-y 
      @scrolltolower="loadMore"
      refresher-enabled
      @refresherrefresh="onRefresh"
      :refresher-triggered="isRefreshing"
    >
      <view 
        v-for="(item, index) in rankingList" 
        :key="item.id"
        class="ranking-item animate-scale-in"
        :style="{ animationDelay: index * 0.1 + 's' }"
        hover-class="item-hover"
        @tap="showDetail(item)"
      >
        <view class="rank-number" :class="{ 'top-three': index < 3 }">{{ index + 1 }}</view>
        <image :src="item.image" mode="aspectFill" class="item-image"></image>
        <view class="item-info">
          <view class="item-title">{{ item.name }}</view>
          <view class="item-brief">{{ item.description }}</view>
          <view class="item-stats">
            <view class="stat-item">
              <uni-icons type="fire" size="14" color="#ff9900"></uni-icons>
              <text>{{ item.popularity }}热度</text>
            </view>
            <view class="stat-item">
              <uni-icons type="star" size="14" color="#ff9900"></uni-icons>
              <text>{{ item.rating }}分</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { 
          type: 'spots', 
          name: '景点榜', 
          icon: 'location',
          filledIcon: 'location-filled'  // 添加实心图标
        },
        { 
          type: 'guides', 
          name: '攻略榜', 
          icon: 'flag',
          filledIcon: 'flag-filled'  // 添加实心图标
        }
      ],
      currentTab: 'spots',
      rankingList: [
        {
          id: 1,
          name: '天门山景区',
          description: '以险峻著称的5A级景区，天门洞和玻璃栈道是最受欢迎的景点...',
          popularity: 9999,
          rating: 4.9,
          image: '/static/spots/tianmen.jpg'
        },
        {
          id: 2,
          name: '凤凰古城',
          description: '国家历史文化名城，沱江、虹桥、古城墙等景观令人流连忘返...',
          popularity: 8888,
          rating: 4.8,
          image: '/static/spots/fenghuang.jpg'
        },
        {
          id: 3,
          name: '张家界国家森林公园',
          description: '世界自然遗产，三千奇峰、峡谷幽深，Avatar电影取景地...',
          popularity: 7777,
          rating: 4.7,
          image: '/static/spots/zhangjiajie.jpg'
        }
      ],
      isRefreshing: false,
      page: 1
    }
  },
  onLoad(options) {
    if (options.type) {
      this.currentTab = options.type;
    }
    this.loadRankingList();
  },
  methods: {
    switchTab(type) {
      if (this.currentTab === type) return;
      this.currentTab = type;
      this.page = 1;
      this.loadRankingList(true);
    },
    loadRankingList(reset = false) {
      // 模拟加载数据
      setTimeout(() => {
        if (reset) {
          // 重置列表数据
          this.rankingList = [...this.rankingList];
        } else {
          // 追加数据
          const newItems = [
            {
              id: this.rankingList.length + 1,
              name: '示例景点' + (this.rankingList.length + 1),
              description: '这是一个新添加的景点描述...',
              popularity: Math.floor(Math.random() * 5000) + 5000,
              rating: (Math.random() * 0.5 + 4.5).toFixed(1),
              image: '/static/demo/spot1.jpg'
            }
          ];
          this.rankingList = [...this.rankingList, ...newItems];
        }
        this.isRefreshing = false;
      }, 1000);
    },
    loadMore() {
      this.page++;
      this.loadRankingList();
    },
    onRefresh() {
      this.isRefreshing = true;
      this.page = 1;
      this.loadRankingList(true);
      setTimeout(() => {
        this.isRefreshing = false;
      }, 1000);
    },
    showDetail(item) {
      uni.navigateTo({
        url: `/pages/popularity/detail?id=${item.id}&type=${this.currentTab}`
      });
    },
    getIconType(tab) {
      return this.currentTab === tab.type ? tab.filledIcon : tab.icon;
    }
  }
}
</script>

<style scoped>
.popularity-container {
  padding: 20px;
  background: #f8f8f8;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

.category-tabs {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s;
}

.tab-item.active {
  background: #ffe4e1;
  color: #ff6b6b;
}

.tab-item text {
  margin-left: 6px;
  font-size: 14px;
}

.ranking-list {
  height: calc(100vh - 180px);
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.ranking-item:active {
  transform: scale(0.98);
}

.rank-number {
  font-size: 24px;
  font-weight: bold;
  color: #999;
  width: 40px;
  text-align: center;
}

.rank-number.top-three {
  color: #ff6b6b;
  font-size: 28px;
  text-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
}

.item-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin: 0 12px;
}

.item-info {
  flex: 1;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
}

.item-brief {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.item-stats {
  display: flex;
  gap: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.stat-item text {
  margin-left: 4px;
}

/* 动画效果 */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 添加点击效果 */
.item-hover {
  transform: scale(0.98);
  opacity: 0.9;
}
</style> 